<template>
  <div class="vuex-demo">
    <h3>vuex-demo</h3>
    <div class="demo-item">
      <h4>store.state.xxx 直接赋值</h4>
      <h6>{{ $store.getters.double }}</h6>
      <button @click="$store.dispatch('increment')">count +2</button>
    </div>
    <div class="demo-item">
      <h4>使用computed</h4>
      <h6>{{ count }}</h6>
      <h5>(count累加1)</h5>
    </div>
    <div class="demo-item">
      <h4>在actions里面再自调actions</h4>
      <h6>{{ count }}</h6>
      <button @click="$store.dispatch('logCount')">console.log</button>
    </div>
    <div class="demo-item">
      <h4>counter 里调 number</h4>
      <h6>getters: {{ $store.getters.replaceTel }}</h6>
      <h6>actions(num+count): {{ $store.getters.showNum }}</h6>
      <button @click="$store.dispatch('increNum')">num +20</button>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
  name: 'VuexDemo',
  props: {},
  setup () {
    const store = useStore()
    // console.log(store)
    const count = computed(() => store.state.count)

    return {
      count
    }
  }
}
</script>

<style lang="less" scoped>

</style>
